<template>
    <div class="page-content">
        <!-- 鸽棚选择 -->
        <dovecote-info v-show="dataList"></dovecote-info>
        <!-- 数据统计 -->
        <data-count v-show="dataList"></data-count>
        <!-- 表格头部 -->
        <table-bar :columns="columns" @changeColumn="changeColumn">
            <div slot="top">
                <el-form label-width="70px">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="状态：">
                                <el-select
                                    v-model="value"
                                    clearable
                                    placeholder="请选择"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options"
                                        :key="item.label"
                                        :label="item.label"
                                        :value="item.label"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :xs="24"
                            :sm="12"
                            :lg="6"
                            style="float: right; margin-right: 0.625rem"
                        >
                            <el-button type="primary" @click="chooseCage"
                                >搜索</el-button
                            >
                            <el-button @click="reset">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 切换按钮 -->
            <el-tooltip
                slot="button1"
                effect="dark"
                content="数据图表"
                placement="top-start"
            >
                <el-button
                    icon="el-icon-pie-chart"
                    size="small"
                    @click="cut()"
                />
            </el-tooltip>
        </table-bar>
        <!-- 表格 -->
        <div v-show="dataList">
            <the-table :data="data">
                <el-table-column label="鸽笼照片" v-if="columns[0].show">
                    <template slot-scope="scope">
                        <img
                            class="avatar"
                            :src="
                                'http://120.77.156.205:9800' + scope.row.picUrl
                            "
                            @click="priewPicture(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cageId"
                    label="鸽笼编号"
                    v-if="columns[1].show"
                >
                </el-table-column>
                <el-table-column label="鸽笼状态" v-if="columns[2].show">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 1" type="danger"
                            >将照蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 2" type="primary"
                            >将抽蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 3" type="primary"
                            >已抽蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.xf === 3" type="success">
                            将查仔
                        </el-tag>
                        <el-tag v-else-if="scope.row.state === 4" type="danger"
                            >已照蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 0" type="info"
                            >无蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 5" type="success"
                            >已查仔</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="abnormal"
                    label="异常情况"
                    v-if="columns[3].show"
                >
                    <template slot-scope="scope">
                        <!-- 提示框显示当前异常数据 -->
                        <el-popover
                            placement="top-end"
                            width="350"
                            trigger="hover"
                        >
                            <echart-one :allData="scope.row"></echart-one>
                            <el-tag
                                type="info"
                                v-if="
                                    (scope.row.state === 0 &&
                                        scope.row.abnormal === null) ||
                                    (scope.row.state === 1 &&
                                        scope.row.abnormal === null) ||
                                    (scope.row.state === 2 &&
                                        scope.row.abnormal === null) ||
                                    (scope.row.state === 3 &&
                                        scope.row.abnormal === '0') ||
                                    (scope.row.state === 4 &&
                                        scope.row.abnormal === '0') ||
                                    (scope.row.state === 5 &&
                                        scope.row.abnormal.substring(0, 1) ===
                                            '0')
                                "
                                slot="reference"
                                >无异常</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '1'
                                "
                                slot="reference"
                                >单蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '2'
                                "
                                slot="reference"
                                >一个未受精蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '3'
                                "
                                slot="reference"
                                >两个未受精蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '4'
                                "
                                slot="reference"
                                >一次踩蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '5'
                                "
                                slot="reference"
                                >两次踩蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    scope.row.state === 5 &&
                                    scope.row.abnormal.substring(0, 1) === '1'
                                "
                                slot="reference"
                                >一个臭蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    scope.row.state === 5 &&
                                    scope.row.abnormal.substring(0, 1) === '2'
                                "
                                slot="reference"
                                >两个臭蛋</el-tag
                            >
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="更新时间"
                    v-if="columns[4].show"
                >
                </el-table-column>
            </the-table>
            <el-pagination
                :page-sizes="[1, 5, 10, 15]"
                :page-size="cagePageSize"
                :current-page="cagePageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="cageTotal"
                class="page"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                v-if="pageShow"
            >
            </el-pagination>
        </div>
        <!-- 弹出框展示鸽笼图片 -->
        <el-dialog
            class="counter"
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            style="width: 100%"
            @close="closeDialog"
        >
            <!-- <slide-show :clearTimer="clearTimer"></slide-show> -->
            <img
                v-if="!isVideo"
                :src="avatar"
                style="width: 37.5rem; height: 25rem"
            />
            <iframe
                v-if="isVideo"
                :src="videoUrl"
                width="600"
                height="400"
                allowfullscreen
            ></iframe>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="playVideo()"
                    >切换视频</el-button
                >
            </div>
        </el-dialog>
        <!-- 另一种展示 -->
        <div
            v-show="!dataList"
            style="display: flex; justify-content: center; align-items: center"
        >
            <el-row :gutter="20">
                <el-col :span="12"
                    ><el-card>
                        <echart-six
                            :cageCountData="cageCountData"
                            :legrndData="legrndData"
                            :totalCage="totalCage"
                        /> </el-card
                ></el-col>
                <el-col :span="12"
                    ><el-card><echart-three /></el-card
                ></el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import {
    chooseCageData,
    getFeedTimeCage,
} from "../../../api/Dovecote/InfoManage/Feeding";
import { getCageCount } from "../../../api/Dovecote/InfoManage/AllHouse";
import DovecoteInfo from "../../../components/common/DovecoteInfo.vue";
import TheTable from "../../../components/common/TheTable.vue";
import TableBar from "../../../components/common/TableBar.vue";
import dataCount from "../../../components/Dovecote/InfoManage/dataCount.vue";
import slideShow from "../../../components/Dovecote/InfoManage/slideshow.vue";
import echartOne from "../../../components/Dovecote/InfoManage/echartOne.vue";
import echartTwo from "../../../components/Dovecote/InfoManage/echartTwo.vue";
import echartThree from "../../../components/Dovecote/InfoManage/echartThree.vue";
import echartSix from "../../../components/Dovecote/InfoManage/echartSix.vue";
export default {
    name: "Feeding",
    meta: {
        title: "哺育中",
    },
    created() {
        this.getCageCountData(); //获得各种鸽笼数量
        this.getFeedTimeCageData(); //获取鸽棚信息
    },
    mounted() {},
    data() {
        return {
            //鸽棚数据分页编号
            dovecotePageNum: 1,
            //鸽棚数据分页数据条数
            dovecotePageSize: 10,
            //鸽棚数据携带参数
            dovecoteParams: {
                baseId: 3, //当前只有这个基地有数据，后面要选择那个基地再改变这个参数
            },
            //鸽笼数据分页编号
            cagePageNum: 1,
            //鸽笼数据分页数据条数
            cagePageSize: 5,
            //鸽笼数据携带参数
            cageParams: {
                baseId: "", //基地id
                dovecoteNumber: "", //鸽棚编号
            },
            //鸽笼数量携带参数
            cageCountParams: {
                baseId: "",
                dovecoteNumber: "",
            },
            //筛选鸽笼数据携带参数
            chooseCageParams: {
                baseId: "",
                dovecoteNumber: "",
                state: "",
                pageNum: "",
                pageSize: "",
            },
            //各种状态鸽笼数量
            cageCountData: [],
            legrndData: [], //各种状态鸽笼数量图表的图例
            totalCage: 0, //各种状态鸽笼总数
            //鸽笼总数
            cageTotal: 0,
            //表格数据
            data: [],
            //分页是否显示
            pageShow: true,
            //列表的形式展示
            dataList: true,
            //弹框是否显示
            dialogVisible: false,
            //关闭定时器
            clearTimer: false,
            //鸽笼暂时图片
            avatar: "",
            dialogTitle: "鸽笼图片",
            columns: [
                {
                    name: "鸽笼照片",
                    show: true,
                },
                {
                    name: "鸽笼编号",
                    show: true,
                },
                {
                    name: "鸽笼状态",
                    show: true,
                },
                {
                    name: "异常情况",
                    show: true,
                },
                {
                    name: "更新时间",
                    show: true,
                },
            ],
            //下拉框配置
            options: [
                {
                    value: "选项1",
                    label: "无蛋",
                },
                {
                    value: "选项2",
                    label: "将照蛋",
                },
                {
                    value: "选项3",
                    label: "照蛋",
                },
                {
                    value: "选项4",
                    label: "将抽蛋",
                },
                {
                    value: "选项5",
                    label: "抽蛋",
                },
                {
                    value: "选项6",
                    label: "将查仔",
                },
                {
                    value: "选项7",
                    label: "查仔",
                },
            ],
            value: "",
            isChooseAll: true,
            //饼图数据
            pieData: [
                { value: 2, name: "单蛋" },
                { value: 5, name: "未受精" },
                { value: 8, name: "踩蛋" },
                { value: 6, name: "坏蛋" },
            ],
            //Y轴数据
            cageYData: ["将查仔", "已查仔"],
            //x轴数据
            cageXData: [50, 60],
            //是否为视频
            isVideo: false,
            //鸽笼视频url
            videoUrl: "",
        };
    },
    computed: {
        ...mapState({
            baseInfo: (state) =>
                //基地信息
                state.Usersetting.BaseInfo,
            allDovecoteInfo: (state) =>
                //基地所有鸽棚信息
                state.Usersetting.AllDovecoteInfo,
            currentDovecote: (state) =>
                //当前鸽棚信息
                state.Usersetting.CurrentDovecote,
        }),
    },
    methods: {
        //获取鸽笼信息
        async getFeedTimeCageData() {
            this.cageParams.baseId = this.currentDovecote.baseId;
            this.cageParams.dovecoteNumber =
                this.currentDovecote.dovecoteNumber;
            let { data } = await getFeedTimeCage(
                this.cagePageNum,
                this.cagePageSize,
                this.cageParams
            );

            // console.log("获取鸽笼信息成功");
            // console.log(data);
            if (data.statusCode === 20000) {
                this.data = data.data.records;
                // console.log(this.data);
                this.cageTotal = data.data.total;
                // console.log(this.cageTotal);
            }
        },

        //筛选鸽笼
        async chooseCage() {
            this.data = [];
            this.chooseCageParams.baseId = this.currentDovecote.baseId;
            this.chooseCageParams.dovecoteNumber =
                this.currentDovecote.dovecoteNumber;
            this.chooseCageParams.pageNum = this.cagePageSize;
            this.chooseCageParams.pageSize = this.cagePageNum;
            if (this.value === "全部") {
                this.isChooseAll = true;
                this.getLayEggsTimeCageData();
            } else {
                this.chooseCageParams.state = this.value;
                let { data } = await chooseCageData(this.chooseCageParams);
                this.data = data.data.records;
                this.isChooseAll = false;
                // console.log(data.data.records);
            }
        },
        //重置数据
        reset() {
            this.data = [];
            this.value = "全部";
            this.isChooseAll = true;
            this.getAllCageData(); //获取所有鸽笼信息
        },

        //表格数据筛选
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout();
        },

        //获得各种状态鸽笼数据
        async getCageCountData() {
            // console.log("获取各种状态鸽笼数据");

            this.cageCountParams.baseId = this.currentDovecote.baseId;
            this.cageCountParams.dovecoteNumber =
                this.currentDovecote.dovecoteNumber;
            let { data } = await getCageCount(this.cageCountParams);

            if (data.statusCode === 20000) {
                let dataTemp = data.data;
                for (let i in dataTemp) {
                    //遍历对象
                    if (i === "将查仔" || i === "查仔") {
                        this.legrndData.push(i); //设置图例

                        let item = {
                            //设置图表数据
                            value: "",
                            name: "",
                        };
                        item.value = dataTemp[i];
                        item.name = i;
                        this.cageCountData.push(item); //图表的数据
                    }
                    this.totalCage += dataTemp[i]; //计算各种鸽笼状态数量合
                }
            }
            // console.log(this.cageCountData);
            // console.log("end");
        },

        //切换显示方式
        cut() {
            let that = this;
            that.dataList = !that.dataList;
        },

        //查看图片
        priewPicture() {
            this.dialogVisible = true;
            this.videoUrl = "http://120.77.156.205:9800" + row.videoUrl; //视频
            this.avatar = "http://120.77.156.205:9800" + row.picUrl; //图片
            // console.log(this.avatar);
        },

        //播放视频
        playVideo() {
            this.isVideo = !this.isVideo;
            if (this.isVideo) {
                this.dialogTitle = "鸽笼视频";
            } else {
                this.dialogTitle = "鸽笼图片";
            }
        },

        //关闭对话框
        closeDialog() {
            // console.log("ing");
            this.clearTimer = true;
        },

        //改变分页当前页码
        handleCurrentChange(newPage) {
            this.cagePageNum = newPage;
            if (this.isChooseAll) {
                this.getFeedTimeCageData(); //获取鸽笼数据
            } else {
                this.chooseCage();
            }
        },

        //改变分页显示条数
        handleSizeChange(newSize) {
            this.cagePageSize = newSize;
            if (this.isChooseAll) {
                this.getFeedTimeCageData(); //获取鸽笼数据
            } else {
                this.chooseCage();
            }
        },
    },
    components: {
        DovecoteInfo,
        TheTable,
        TableBar,
        dataCount,
        slideShow,
        echartOne,
        echartTwo,
        echartThree,
        echartSix,
    },
};
</script>
<style lang="scss" scoped>
.page-content {
    img:hover {
        cursor: pointer;
    }
    .avatar {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 50%;
    }
    .page {
        margin-top: 1.25rem;
        text-align: center;
    }
}
.counter {
    text-align: center;
}
</style>